<style>
    .bw-main {
        position: relative;
        padding: 15px 15px;
        background-color: #ffffff;
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }
    .bw-container {
        min-height: 250px;
        padding: 15px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    #news-box {
        position: relative
    }

    #news-box .news-item {
        top: 0;
        left: 0;
        padding: 5px;
        margin: 10px;
        width: 300px;
        position: relative;
        border: 1px solid #ccc;
        box-sizing: content-box
    }

    #news-box .news-item .news-articel-item {
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
        background-size: 100%;
        background-position: center center
    }

    #news-box .news-item .news-articel-item p {
        bottom: 0;
        width: 100%;
        color: #fff;
        padding: 5px;
        max-height: 5em;
        font-size: 12px;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, .7)
    }

    #news-box .news-item .news-articel-item.other {
        height: 50px;
        padding: 5px 0
    }

    #news-box .news-item .news-articel-item span {
        width: 245px;
        overflow: hidden;
        line-height: 50px;
        white-space: nowrap;
        display: inline-block;
        text-overflow: ellipsis
    }

    #news-box .news-item .news-articel-item div {
        width: 50px;
        height: 50px;
        float: right;
        overflow: hidden;
        position: relative;
        background-position: center center;
        background-size: cover;
    }

    #news-box .hr-line-dashed {
        margin: 6px 0 1px 0
    }

    #news-box .news-item .hr-line-dashed:last-child {
        display: none
    }

    #news-box .news-tools {
        top: 0;
        z-index: 80;
        color: #fff;
        width: 302px;
        padding: 0 5px;
        margin-left: -6px;
        line-height: 38px;
        text-align: right;
        position: absolute;
        background: rgba(0, 0, 0, .7)
    }

    #news-box .news-tools a {
        color: #fff;
        margin-left: 10px
    }
</style>

<div class="bw-container">
    <div class="bw-main">
        <button class="layui-btn layui-btn-normal layui-btn-sm" data-open="member.wechatKeyword/addMaterial?miniapp_id={$member_miniapp_id}" data-title="添加图文" data-full="true" data-table="currentTableRenderId"><i class="fa fa-plus "></i> 添加图文</button>
        <div class="think-box-shadow">
            <div id="news-box" class="layui-clear">
                {foreach $list as $vo}
                <div class="news-item">
                    <div class='news-tools layui-hide'>
                        <a data-width="320px" data-height="600px" data-title="预览" data-open='{:url("@member.WechatKeyword/previewNews")}?type=news&id={$vo.id}' href='javascript:void(0)'>预览</a>
                        <a data-open='{:url("@member.WechatKeyword/addMaterial")}?id={$vo.id}&miniapp_id={$member_miniapp_id}' href='javascript:void(0)'>编辑</a>
                        <a data-news-del="{$vo.id}" href='javascript:void(0)'>删除</a>
                    </div>
                    {foreach $vo.articles as $k => $v}
                    {if $k < 1}
                    <div data-tips-image='{$v.local_url}' class='news-articel-item' style='background-image:url("{$v.local_url}")'>
                        {if $v.title}<p>{$v.title}</p>{/if}
                    </div>
                    <div class="hr-line-dashed"></div>
                    {else}
                    <div class='news-articel-item other'>
                        <span>{$v.title}</span>
                        <div data-tips-image='{$v.local_url}' style='background-image:url("{$v.local_url}");'></div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    {/if}
                    {/foreach}
                </div>
                {/foreach}
            </div>
            {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
        </div>
    </div>
</div>
<script>
    var delUrl ='removeMaterial?miniapp_id={$member_miniapp_id}';
</script>
